<template>
<div>
   <div>
    <!-- 头部 -->
    <div class="top">
      <div class="top-server">
        <div class="server">
          <!-- <app-server></app-server> -->

          <img src="../img/search.png" alt />
          <span>搜索商品，给家人买点什么</span>
        </div>
        <div class="tv">
          <img src="../img/card-icon.png" alt />
          <p>节目单</p>
        </div>
      </div>
      <div class="top-nav">
        <ul>
          <li
            :class="{'active':isActive==index}"
            v-for="(item,index) in nav"
            :key="item.id"
            @click="change(index)"
          >
            {{item}}
            <span></span>
          </li>
        </ul>
      </div>
    </div>
    <!-- main -->
    <div class="main">
      <!-- 轮播图 -->
      <app-swiper v-bind:bannerimg="bannerimg"></app-swiper>
      <div class="img-show">
        <div>
          <img
            src="http://mall.pic.sharkshopping.com/oss/xin_prod/image/100859/0121140025-01_2ed69f56.jpg"
            alt
          />
        </div>
        <div>
          <img
            src="http://mall.pic.sharkshopping.com/oss/xin_prod/image/100399/0121140048-02_28c717c3.jpg"
            alt
          />
        </div>
      </div>
      <!-- tv-show -->
      <div class="tv-show">
        <div class="tv-box">
          <div class="tv-top">
            <span>TV直播</span>
            <span>查看节目单></span>
          </div>
          <div class="tv-img">
            <img
              src="http://mall.pic.sharkshopping.com/oss/3589f/cdde9/ecfa8358a09fbf408fba4f1f09fcdde9.jpg"
              alt
            />
            <div class="img-cover">
              <div class="tv-hd1">
                <p>9折</p>
                <p>活动</p>
              </div>
              <div class="tv-hd2">
                <p>5倍</p>
                <p>积分</p>
              </div>
              <div class="play"></div>
              <div class="count">
                <span>直播中</span>
                <span>00:00:00</span>
              </div>
            </div>
          </div>
          <p class="tv-title">工美珠宝花开富贵猛犸象牙手镯</p>
          <div class="tv-price">
            <div class="price-cont">
              <p>立减</p>
              <p>100</p>
            </div>
            <div class="price">
              <p>
                <span>tv价</span>
                <span>￥</span>
                <span>4980</span>
              </p>
              <p>
                <span>手机价</span>
                <span>￥</span>
                <span>4880</span>
                <span>可得489积分</span>
              </p>
            </div>
          </div>
          <div class="tv-buy">立即购买</div>
        </div>
      </div>
      <div class="newpeople">
        <img
          src="http://mall.pic.sharkshopping.com/oss/xin_prod/image/100397/1130182949-1_09231177.jpg"
          alt
        />
      </div>
      <!-- hot-top -->
      <div class="hot-top">
        <p class="hot-title">热销top排行榜</p>
        <ul class="hot-goods">
          <li class="goods-content" v-for="(item) in hottop" :key="item.id">
            <div class="tv-hot"></div>
            <img :src="item.url" alt />
            <p class="goods-title">{{item.title}}</p>
            <p class="goods-price">
              <span>¥</span>
              <span>{{item.priceA}}</span>
            </p>
          </li>
          <!-- <li class="goods-content">
            <div class="tv-hot"></div>
            <img
              src="http://mall.pic.sharkshopping.com/oss/cbf70/33a7c/a3919cbfa570584627585acb57b33a7c.png"
              alt
            />
            <p class="goods-title">以色列进口Sal-Vento焕颜紧致眼霜（15ml*4瓶）</p>
            <p class="goods-price">
              <span>¥</span>
              <span>720.00</span>
            </p>
          </li>
          <li class="goods-content">
            <div class="tv-hot"></div>
            <img
              src="http://mall.pic.sharkshopping.com/oss/cbf70/33a7c/a3919cbfa570584627585acb57b33a7c.png"
              alt
            />
            <p class="goods-title">以色列进口Sal-Vento焕颜紧致眼霜（15ml*4瓶）</p>
            <p class="goods-price">
              <span>¥</span>
              <span>720.00</span>
            </p>
          </li>
          <li class="goods-content">
            <div class="tv-hot"></div>
            <img
              src="http://mall.pic.sharkshopping.com/oss/cbf70/33a7c/a3919cbfa570584627585acb57b33a7c.png"
              alt
            />
            <p class="goods-title">以色列进口Sal-Vento焕颜紧致眼霜（15ml*4瓶）</p>
            <p class="goods-price">
              <span>¥</span>
              <span>720.00</span>
            </p>
          </li>
          <li class="goods-content">
            <div class="tv-hot"></div>
            <img
              src="http://mall.pic.sharkshopping.com/oss/cbf70/33a7c/a3919cbfa570584627585acb57b33a7c.png"
              alt
            />
            <p class="goods-title">以色列进口Sal-Vento焕颜紧致眼霜（15ml*4瓶）</p>
            <p class="goods-price">
              <span>¥</span>
              <span>720.00</span>
            </p>
          </li>
          <li class="goods-content">
            <div class="tv-hot"></div>
            <img
              src="http://mall.pic.sharkshopping.com/oss/cbf70/33a7c/a3919cbfa570584627585acb57b33a7c.png"
              alt
            />
            <p class="goods-title">以色列进口Sal-Vento焕颜紧致眼霜（15ml*4瓶）</p>
            <p class="goods-price">
              <span>¥</span>
              <span>720.00</span>
            </p>
          </li>-->
        </ul>
      </div>

      <div class="free-server">
        <div class="free-title">
          <span>拼团包邮</span>
          <span></span>
        </div>
        <ul class="server-goods">
          <li class="server-content">
            <div class="warn">
              <p>
                <span>¥</span>
                <span>1</span>
              </p>
              <p>
                <span>¥</span>
                <span>28</span>
              </p>
            </div>
            <img
              src="http://mall.pic.sharkshopping.com/oss/93860/ee89d/5f2099385e60d54b6bd9822b8d6ee89d.jpg"
              alt
            />
            <div class="server-price">
              <p class="discount-price">
                <span>¥</span>
                <span>1</span>
              </p>
              <p class="original-price">
                <span>¥</span>
                <span>28</span>
              </p>
            </div>
          </li>
          <li class="server-content">
            <div class="warn">
              <p>
                <span>¥</span>
                <span>1</span>
              </p>
              <p>
                <span>¥</span>
                <span>28</span>
              </p>
            </div>
            <img
              src="http://mall.pic.sharkshopping.com/oss/93860/ee89d/5f2099385e60d54b6bd9822b8d6ee89d.jpg"
              alt
            />
            <div class="server-price">
              <p class="discount-price">
                <span>¥</span>
                <span>1</span>
              </p>
              <p class="original-price">
                <span>¥</span>
                <span>28</span>
              </p>
            </div>
          </li>
          <li class="server-content">
            <div class="warn">
              <p>
                <span>¥</span>
                <span>1</span>
              </p>
              <p>
                <span>¥</span>
                <span>28</span>
              </p>
            </div>
            <img
              src="http://mall.pic.sharkshopping.com/oss/93860/ee89d/5f2099385e60d54b6bd9822b8d6ee89d.jpg"
              alt
            />
            <div class="server-price">
              <p class="discount-price">
                <span>¥</span>
                <span>1</span>
              </p>
              <p class="original-price">
                <span>¥</span>
                <span>28</span>
              </p>
            </div>
          </li>
          <li class="server-content">
            <div class="warn">
              <p>
                <span>¥</span>
                <span>1</span>
              </p>
              <p>
                <span>¥</span>
                <span>28</span>
              </p>
            </div>
            <img
              src="http://mall.pic.sharkshopping.com/oss/93860/ee89d/5f2099385e60d54b6bd9822b8d6ee89d.jpg"
              alt
            />
            <div class="server-price">
              <p class="discount-price">
                <span>¥</span>
                <span>1</span>
              </p>
              <p class="original-price">
                <span>¥</span>
                <span>28</span>
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div class="newpeople" style="margin-bottom:0.1rem">
        <img
          src="http://mall.pic.sharkshopping.com/oss/xin_prod/image/100748/0119195101_f5ff958e.gif"
          alt
          style="height:6.375rem"
        />
      </div>
      <div class="img-show" style="margin: 0 0.7375rem 0.7375rem 0.7375rem;">
        <div>
          <img
            src="http://mall.pic.sharkshopping.com/oss/xin_prod/image/100438/0121115301-20200121115240_c245196b.jpg"
            alt
          />
        </div>
        <div>
          <img
            src="http://mall.pic.sharkshopping.com/oss/xin_prod/image/100378/0201092425-23-26_8b87efab.jpg"
            alt
          />
        </div>
      </div>
      <!-- shark-hot -->
      <div class="shark-hot">
        <div class="shark-title"></div>
        <ul class="shark-goods">
          <li class="shark-content" v-for="(item) in shark" :key="item.id">
            <div class="content-img">
              <img :src="item.url" alt />
              <div class="goodnum">
                <span>{{item.goodnum}}</span>
                <img src="https://wp.sharkshopping.com/static/img/good_num.png" alt />
              </div>
            </div>
            <div class="content-title">
              <p>{{item.title}}</p>
            </div>
            <div class="content-price">
              <p>
                <span>¥</span>
                <span>{{item.priceA}}</span>
              </p>
              <p>
                <span>{{item.money}}</span>
                <span>{{item.priceB}}</span>
              </p>
            </div>
          </li>
        </ul>
      </div>
      <!-- main-bottom -->
      <div class="main-bottom">
        <p>好厉害，您已经看完了所有商品~</p>
        <p>公司：北京环球国广媒体科技有限公司</p>
        <p>地址：北京市石景山区实兴大街30号院3号楼8层8687室</p>
        <p>电话：010-85358000</p>
      </div>
    </div>
  </div>
<app-nav></app-nav>
</div>
 
</template>

<script>
import appNav from "../components/appnav";
import appSwiper from "../components/swiper";
// import appServer from "../components/appserver";
export default {
  components: {
    appNav,
    appSwiper
  },
  data() {
    return {
      nav: ["首页", "TV商品", "每日一品", "新品首发", "专题", "优惠券"],
      isActive: 0,
      hottop: [],
      shark: [],
      bannerimg: [
        "http://mall.pic.sharkshopping.com/oss/xin_prod/image/100424/0127222124-20200127204345_d0701669.jpg",
        "http://mall.pic.sharkshopping.com/oss/xin_prod/image/100278/0121105111-push_c84610b4.jpg",
        "http://mall.pic.sharkshopping.com/oss/xin_prod/image/100807/0203174051_874f4c4d.png"
      ],
      num: 0
    };
  },
  methods: {
    change(index) {
      this.isActive = index;
    },
    async gethottopdata() {
      let { data } = await this.$axios.get(
        "http://localhost:1913/users/hotall"
      );
      // window.console.log(data);
      this.hottop = data;
    },
    async getshark() {
      let { data } = await this.$axios.get("http://localhost:1913/users/shark");
      this.shark = data;
    }
  },
  created() {
    this.gethottopdata();
    this.getshark();
  }
};
</script>
<style lang="scss" scoped>
.top {
  height: 4.5rem;
  .top-server {
    display: flex;
    padding: 0.5rem 0;
    .server {
      width: 15.3125rem;
      background: #f5f5f5;
      line-height: 1.875rem;
      border-radius: 0.125rem;
      margin-left: 1.1rem;
      margin-right: 1rem;
      text-align: center;
      img {
        width: 0.9375rem;
        height: 0.9375rem;
        margin-right: 0.25rem;
      }
      span {
        font-size: 0.875rem;
        color: #666;
      }
    }
    .tv {
      margin-right: 1.25rem;
      margin-top: -0.4375rem;
      img {
        width: 1.5625rem;
        height: 1.5625rem;
      }
      p {
        font-size: 0.5rem;
      }
    }
  }
  .top-nav {
    ul {
      display: flex;
      justify-content: space-around;
      li {
        list-style: none;
        font-size: 0.875rem;
        position: relative;
        // padding-bottom: 5px;
      }
      .active {
        color: #931db3;
        span {
          display: block;
          width: 0.875rem;
          height: 0.125rem;
          background: #931db3;
          position: absolute;
          left: 50%;
          top: 1.36rem;
          margin-left: -0.4375rem;
        }
      }
    }
  }
}
.main {
  flex: 1;
  // width: 20rem;
  background: #f5f5f5;
  overflow: auto;
  .img-show {
    display: flex;
    margin-bottom: 0.3125rem;
    height: 5rem;
    div {
      width: 50%;
      height: 100%;
      img {
        flex: 1;
        width: 100%;
        height: 100%;
        border-radius: 7px;
      }
    }
  }
  .tv-show {
    margin: 0.7375rem 0.7375rem;
    background: white;
    height: 22.8125rem;
    border-radius: 0.4375rem;
    .tv-box {
      padding: 0.7375rem 0.7375rem;
      // background: #931db3;
      .tv-top {
        display: flex;
        justify-content: space-between;
        span:nth-of-type(2) {
          font-size: 0.75rem;
        }
      }
      .tv-img {
        margin: 0.5375rem 0;
        height: 12.5rem;
        position: relative;
        img:nth-of-type(1) {
          width: 100%;
          height: 100%;
          background: #f5f5f5;
        }
        .img-cover {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.1);
          .tv-hd1 {
            background: url(http://mall.pic.sharkshopping.com/oss/xin_prod/image/100309/0423140738-label-red-big3x_99223388.png)
              no-repeat;
            background-size: 100% 100%;
            width: 2.1875rem;
            height: 2.1875rem;
            position: absolute;
            left: 0.625rem;
            top: 0.625rem;
            p {
              font-size: 0.75rem;
              color: #df3434;
            }
          }
          .tv-hd2 {
            background: url(http://mall.pic.sharkshopping.com/oss/xin_prod/image/100309/0423140738-label-red-big3x_99223388.png)
              no-repeat;
            background-size: 100% 100%;
            width: 2.1875rem;
            height: 2.1875rem;
            position: absolute;
            left: 2.375rem;
            top: 0.5625rem;
            p {
              font-size: 0.75rem;
              color: #df3434;
            }
          }
          .play {
            background: url(https://wp.sharkshopping.com/static/img/play_home.png)
              no-repeat;
            background-size: 100% 100%;
            width: 1.5rem;
            height: 1.625rem;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -0.75rem;
            margin-top: -0.8125rem;
          }
          .count {
            height: 1.25rem;
            width: 7.125rem;
            position: absolute;
            left: 50%;
            top: 7.6rem;
            margin-left: -3.5625rem;
            display: flex;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 1rem;
            span {
              color: #f5f5f5;
              font-size: 0.75rem;
              line-height: 1.25rem;
              display: inline-block;
              height: 100%;
            }
            span:nth-of-type(1) {
              text-align: center;
              width: 3.25rem;
              border-radius: 1rem;
              background: #df3434;
            }
            span:nth-of-type(2) {
              margin-left: 0.3125rem;
            }
          }
        }
      }
      .tv-title {
        margin-bottom: 0.5375rem;
        text-align: left;
        color: #333;
      }
      .tv-price {
        height: 2.25rem;
        display: flex;
        .price-cont {
          background: url(https://wp.sharkshopping.com/static/img/label_decline.png)
            no-repeat;
          background-size: 100% 100%;
          width: 2.6875rem;
          color: white;
          font-size: 0.75rem;
        }
        .price {
          p:nth-of-type(1) {
            text-align: left;
            span {
              font-size: 0.625rem;
            }
            span:nth-of-type(1) {
              margin: 0.3125rem 0.4375rem;
            }
          }
          p:nth-of-type(2) {
            display: flex;
            margin-left: 0.4375rem;
            span:nth-of-type(1) {
              font-size: 0.875rem;
            }
            span:nth-of-type(2) {
              font-size: 0.625rem;
              color: #8909ac;
            }
            span:nth-of-type(3) {
              font-size: 1rem;
              color: #8909ac;
            }
            span:nth-of-type(4) {
              display: block;
              width: 4.9875rem;
              border-radius: 0.13rem;
              line-height: 1.1875rem;
              margin-left: 0.3125rem;
              font-size: 0.75rem;
              color: white;
              position: relative;
              background: linear-gradient(to right, #de38ad, #a23bca);
            }
            span:nth-of-type(4):before {
              content: "";
              position: absolute;
              border-top: 0.125rem solid transparent;
              border-bottom: 0.125rem solid transparent;
              border-right: 0.125rem solid #de38ad;
              top: 0.5rem;
              left: -0.125rem;
            }
          }
        }
      }
      .tv-buy {
        height: 1.875rem;
        background: #8909ac;
        font-size: 1rem;
        line-height: 1.875rem;
        text-align: center;
        margin-top: 0.5375rem;
        color: white;
        border-radius: 0.25rem;
      }
    }
  }
  .newpeople {
    margin: 0 0.7375rem 0.7375rem 0.7375rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.3125rem;
    }
  }
  .hot-top {
    margin: 0 0.7375rem 0.7375rem 0.7375rem;
    background: white;
    border-radius: 0.3125rem;
    .hot-title {
      text-align: left;
      margin-left: 0.625rem;
      line-height: 2.25rem;
    }
    .hot-goods {
      margin: 0 0.7375rem;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .goods-content {
        width: 33%;
        position: relative;
        list-style: none;
        margin-bottom: 0.625rem;
        flex-wrap: wrap;
        .tv-hot {
          position: absolute;
          left: 0;
          top: 0;
          width: 1.4375rem;
          height: 1.4375rem;
          background: url(http://ghs-mall-img.oss-cn-beijing.aliyuncs.com/oss/xin/image/100309/0527182720-2x_40a7f9b1.png)
            no-repeat;
          background-size: 100% 100%;
        }
        img {
          height: 100%;
          height: 5.625rem;
        }
        .goods-title {
          font-size: 0.75rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .goods-price {
          margin-top: 0.125rem 0;
          color: #931db3;
          span:nth-of-type(1) {
            font-size: 0.875rem;
          }
        }
      }
    }
  }
  .free-server {
    background: white;
    margin-bottom: 0.7375rem;
    .free-title {
      margin: 0 1rem;
      line-height: 1.875rem;
      text-align: left;
      display: flex;
      justify-content: space-between;
      span:nth-of-type(2) {
        display: block;
        width: 0.5rem;
        height: 0.8125rem;
        background: url(https://wp.sharkshopping.com/static/img/choice_icon.png)
          no-repeat;
        background-size: 100% 100%;
        margin-top: 0.5625rem;
      }
    }
    .server-goods {
      margin: 0 1rem;
      display: flex;
      .server-content {
        width: 25%;
        list-style: none;
        position: relative;
        img {
          width: 100%;
          height: 3.375rem;
        }
        .warn {
          width: 2.375rem;
          height: 2.375rem;
          background: url(https://wp.sharkshopping.com/static/img/group_price.png)
            no-repeat;
          background-size: 100% 100%;
          position: absolute;
          top: 0;
          left: 1.875rem;
          p:nth-of-type(1) {
            color: #fefa96;
            font-size: 0.75rem;
            margin-top: 0.5rem;
            line-height: 0.625rem;
            span:nth-of-type(2) {
              font-size: 1.125rem;
              font-weight: bold;
            }
          }
          p:nth-of-type(2) {
            color: white;
            font-size: 0.75rem;
            text-decoration: line-through;
          }
        }
        .server-price {
          .discount-price {
            color: #d0021b;
            span:nth-of-type(1) {
              font-size: 0.75rem;
            }
          }
          .original-price {
            color: #999;
            font-size: 0.9rem;
            text-decoration: line-through;
          }
        }
      }
    }
  }
  .shark-hot {
    .shark-title {
      height: 1.875rem;
      background: url(http://mall.pic.sharkshopping.com/oss/xin_prod/image/100665/0423150235_77c9c05d.jpg)
        no-repeat;
      background-size: 100% 100%;
    }
    .shark-goods {
      .shark-content {
        margin-bottom: 0.625rem;
        background: white;
        .content-img {
          height: 11.1875rem;
          position: relative;
          img {
            height: 100%;
            width: 100%;
          }
          .goodnum {
            font-size: 0.875rem;
            color: white;
            position: absolute;
            right: 0.5rem;
            top: 9rem;
            img {
              width: 0.75rem;
              height: 0.75rem;
              margin-left: 0.625rem;
            }
          }
        }
        .content-title {
          margin: 0.325rem 0.525rem;
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }
        .content-price {
          display: flex;
          margin: 0 0.825rem;
          padding-bottom: 0.3rem;
          p:nth-of-type(1) {
            color: #8909ac;
            font-size: 1.5rem;
            margin-right: 0.5125rem;
            span:nth-of-type(1) {
              font-size: 0.6rem;
              margin-right: 0.0875rem;
            }
          }
          p:nth-of-type(2) {
            color: #999;
            font-size: 0.875rem;
            text-decoration: line-through;
            margin-top: 0.525rem;
          }
        }
      }
    }
  }
  .main-bottom {
    margin: 1rem 0.625rem 1rem 0.625rem;
    p {
      font-size: 0.74rem;
      text-align: center;
      line-height: 1.25rem;
      color: #999;
    }
    p:nth-of-type(1) {
      margin-bottom: 1.3rem;
    }
  }
}
</style>

